<template>
    <div class="managePage">
        <el-row>
            <el-col :span="4">
                <el-input v-model="domainText" suffix-icon="el-icon-search" placeholder="请输入域名"></el-input>
            </el-col>
            <el-col :span="2" :offset="18">
                <el-button type="primary" icon="el-icon-plus" @click="addHomeListFn">添加</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" class="tableList" stripe>
            <el-table-column prop="logo" label="缩略图">
                <template slot-scope="scope">
                    <img :src="scope.row.logo" width="80px" alt />
                </template>
            </el-table-column>
            <el-table-column prop="domain" label="域名入口" align="center">
                <template slot-scope="scope">
                    <a
                        :href="'http://'+scope.row.domain"
                        target="blank"
                        class="textLine"
                    >{{scope.row.domain}}</a>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" align="center"></el-table-column>
            <el-table-column prop="seo_title" label="SEO标题" align="center"></el-table-column>
            <el-table-column prop="seo_desc" label="SEO描述" align="center"></el-table-column>
            <el-table-column prop="language" label="语言" align="center"></el-table-column>
            <el-table-column prop="status" label="是否有主页" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.status == 1 ? '是': '未设置'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="theme" label="主题"></el-table-column>
            <el-table-column prop="email" label="联系邮箱"></el-table-column>
            <el-table-column prop="operation" label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.isAdd !== 1">
                        <el-button
                            size="mini"
                            type="success"
                            @click="handleClick(scope.row, 'set')"
                        >设置</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleClick(scope.row, 'forbid')"
                        >关站</el-button>
                    </div>
                    <el-button
                        v-else-if="scope.row.isAdd === 1"
                        size="mini"
                        type="primary"
                        @click="handleClick(scope.row, 'add')"
                    >添加</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import Service from "../../services/main";
export default {
    name: "Manage",
    data() {
        return {
            domainText: "",
            tableData: []
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取产品数据
        getData() {
            let params = {
                domain: ""
            };
            Service.getHomeList(this, params).then(res => {
                this.tableData = res.result.list;
                this.getDomain();
            });
        },

        // 获取产品数据
        getDomain() {
            Service.getDomainList(this, {}).then(res => {
                let data = res.result;
                for (let key in data) {
                    this.tableData.push({
                        domain: data[key],
                        isAdd: 1
                    });
                }
            });
        },

        // 添加
        addHomeListFn() {
            let data = {
                domain: "shop.1996jt.xyz"
            };
            this.$router.push("/manage/new");
        },

        // 点击设置或者禁用
        handleClick(data, type) {
            if (type === "set") {
                // 设置
                this.$router.push("/manage/set/" + data.domain);
                data.type = "set";
                sessionStorage.setItem("domainInfo", JSON.stringify(data));
            } else if (type === "forbid") {
                // 禁用
                this.$router.push("/manage/set/" + data.domain);
            } else if (type === "add") {
                // 新增
                // this.$router.push("/manage/new");
                this.$router.push("/manage/set/" + data.domain);
                data.type = "add";
                sessionStorage.setItem("domainInfo", JSON.stringify(data));
            }
        }
    }
};
</script>

<style lang="scss">
.managePage {
    padding-top: 20px;
    .el-icon-search {
        cursor: pointer;
        font-size: 20px;
        color: #666;
    }
    .tableList {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        thead {
            color: #666;
        }
        .textLine {
            text-decoration: underline;
            color: #b5b5b5;
        }
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
}
</style>